<template>
<view>
<view class="body" v-if="!onload">
    <view v-if="hasContent">
        <view class="list" v-if="collectList">
            <checkbox-group @change="chouseMessage">
                <view v-for="(item, index) in collectList" :key="index" class="list-item">
                    <label class="checkbox" v-if="showCheckbox">
                        <checkbox :value="item.id"></checkbox>
                        <view class="content">
                            <text class="title">{{item.value.title}}</text>
                        </view>
                    </label>
                    <view v-if="!showCheckbox" @tap="navBtn" :data-index="index">
                        <text class="title">{{item.value.title}}</text>
                    </view>
                </view>
            </checkbox-group>
        </view>
        <view class="control-bottom row-between" v-if="!showCheckbox && collectList[0]">
            <navigator class="wait" :url="'/pages/mine/collect/all/all?type=add&id=' + type_id">
                <text>去添加</text>
            </navigator>
            <view class="cot-button" @tap="editAll">批量编辑</view>
        </view>
        <view class="control-bottom row-between" v-if="showCheckbox">
            <view class="cot-button" @tap="delCollect">删除</view>
            <view class="cot-button" @tap="more">更多</view>
            <view class="cot-button" @tap="done">完成</view>
        </view>
        <view class="black" v-if="showCot" @tap="cancel"></view>
        <view class="control" v-if="showCot">
            <view style="padding: 60rpx 40rpx 0 40rpx;">
                <view class="cot-list">
                    <view class="cot-item" @tap="top">
                        <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191421_42307.png" class="cot-icon"></image>
                        <view class="cot-name">置顶</view>
                    </view>
                    <view class="cot-item" @tap="moveTo" data-type="wait">
                        <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191236_23472.png" class="cot-icon"></image>
                        <view class="cot-name">{{type_id == 9 ? '移出' : '移入'}}代办</view>
                    </view>
                    <navigator class="cot-item" :url="'/pages/collect/collect?type=move&ids=' + chouseMessaages + '&from_type=' + type_id">
                        <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191312_87275.png" class="cot-icon"></image>
                        <view class="cot-name">移动至</view>
                    </navigator>
                    <view class="cot-item" @tap="delete" v-if="type_id != 9">
                        <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191206_12451.png" class="cot-icon"></image>
                        <view class="cot-name">删除收藏夹</view>
                    </view>
                </view>
            </view>
            <view class="cancel" @tap="cancel">取消</view>
        </view>
    </view>
    <view class="to-add flex col center" v-if="!hasContent">
        <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014151841_43252.png" class="none-icon"></image>
        <view class="tips">空空如也，快快添加内容吧</view>
        <navigator :url="'/pages/mine/collect/all/all?type=add&id=' + type_id" class="go">
            去添加
        </navigator>
    </view>
</view>
<image src="http://imgbdb3.bendibao.com/whbdb/202010/20/20201020134433_24784.jpg" mode="widthFix" style="width:100%" v-if="onload"></image>
<view class="black" v-if="model"></view>
<view class="model row center" v-if="model">
    <form class="model-content" @submit="modelDelete">
        <view class="model-title">在本文件夹中删除</view>
        <checkbox-group name="delete">
            <label class="row center">
                <checkbox value="1"></checkbox>
                <text>在全部收藏夹中同步删除</text>
            </label>
        </checkbox-group>
        <view class="model-control row around">
            <button class="model-ctl-item" @tap="modelCancel">取消</button>
            <button class="model-ctl-item" form-type="submit">删除</button>
        </view>
    </form>
</view>
</view>
</template>

<script>
// pages/mine/collect/collect.js
const app = getApp();
const util = require("../../../../utils/util.js");
var page = 1;
import tools from "../../../../utils/tools.js";
var load = true;

export default {
  data() {
    return {
      collectList: [],
      showCheckbox: false,
      waitNum: 0,
      showCot: false,
      chouseMessaages: [],
      type_id: "",
      hasContent: true,
      model: false,
      onload: true,
      showmove: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      // 页面标题
      title: options.collect,
      // 接口调用成功的回调函数
      success: res => {},
      // 接口调用失败的回调函数
      fail: res => {},
      // 接口调用结束的回调函数（调用成功、失败都会执行）
      complete: res => {}
    });
    this.type_id = options.id ? options.id : "0";
    this.setData({
      type_id: this.type_id
    });
    util.getUrl(app.globalData.url);
  },

  onShow() {
    load = true;
    this.setData({
      onload: true
    });
    tools.getUserCollect(this.type_id).then(res => {
      this.setData({
        collectList: res,
        hasContent: res.length ? true : false,
        showCot: false,
        onload: false
      });
    });
  },

  onReachBottom: function () {
    page++;
    if (load) tools.getUserCollect(this.type_id, page).then(res => {
      if (res[0]) {
        res.forEach(item => this.collectList.push(item));
        this.setData({
          collectList: this.collectList
        });
      } else load = false;
    });
  },
  onShareAppMessage: function () {},
  methods: {
    // 删除收藏夹
    delete() {
      uni.showModal({
        title: '温馨提示',
        content: '确认删除收藏夹？',
        showCancel: true,
        cancelText: '取消',
        cancelColor: '#000000',
        confirmText: '确定',
        confirmColor: '#3CC51F',
        success: result => {
          if (result.confirm) {
            util.request("user.php", {
              action: "collect",
              option: "del_dir",
              type_id: this.type_id,
              user_id: uni.getStorageSync("user_id"),
              openid: uni.getStorageSync("openid")
            }, "POST").then(res => {
              uni.navigateBack({
                delta: 1
              });
            });
          }
        }
      });
    },

    // 删除收藏
    delCollect(e) {
      this.setData({
        model: true,
        showmove: false,
        showCot: false
      });
    },

    // 提示框取消
    modelCancel() {
      this.setData({
        model: false
      });
    },

    // 完成批量编辑
    done() {
      this.setData({
        showCheckbox: false
      });
    },

    // 批量选择文章
    chouseMessage(e) {
      let chouseMessaages = e.detail.value;
      this.setData({
        chouseMessaages
      });
    },

    // 跳转
    navBtn(e) {
      let index = e.currentTarget.dataset.index;
      let data = this.collectList[index].value;
      let id = data.id;
      let nav = data.nav;
      let citycode = this.collectList[index].citycode;
      let path = data.path;

      if (path == "/pages/topicality/bsy/bsy") {
        uni.navigateTo({
          url: path + '?id=' + id + '&city=' + citycode
        });
      } else {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + nav + '&city=' + citycode
        });
      }
    },

    closeAll() {
      this.setData({
        model: false,
        showCot: false,
        showCheckbox: false
      });
    },

    // 提示款确认删除
    modelDelete(e) {
      // 直接删除
      if (e.detail.value.delete[0]) {
        tools.deleteCollect(this.chouseMessaages.join(",")).then(res => {
          this.closeAll();
          this.onShow();
        });
      } else {
        // 从当亲文件夹删除
        tools.moveCollect("", this.chouseMessaages.join(",")).then(res => {
          this.closeAll();
          this.onShow();
        });
      }
    },

    // 打开更多功能
    more() {
      this.setData({
        showCot: true
      });
    },

    // 关闭更多
    cancel() {
      this.setData({
        showCot: false
      });
    },

    // 批量编辑
    editAll() {
      this.setData({
        showCheckbox: true
      });
    },

    // 移动文章
    moveTo(e) {
      // 移入代办
      if (this.type_id == 9) {
        tools.moveCollect("", this.chouseMessaages.join(",")).then(res => uni.showToast({
          title: '移出代办成功',
          icon: 'none',
          success: res => {
            this.closemove();
            this.onShow();
          }
        }));
      } else {
        tools.moveCollect(9, this.chouseMessaages.join(",")).then(res => uni.showToast({
          title: '移入代办成功',
          icon: 'none',
          success: res => {
            this.closemove();
            this.onShow();
          }
        }));
      }
    },

    closemove() {
      this.setData({
        showCot: true
      });
    },

    // 置顶
    top() {
      tools.top(this.chouseMessaages.join(",")).then(res => {
        this.closeAll();
        this.onShow();
      });
    }

  }
};
</script>
<style>
.list-item {
    padding: 34rpx 40rpx;
    margin-bottom: 25rpx;
    border-bottom: 2rpx solid #F6F6F6;
    font-size: 28rpx;
    font-weight: 500;
    color: #232323;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel {
    margin-right: 26rpx;
    color: #A6A6A6;
}

.checkbox {
    display: flex;
    align-items: flex-start;
}

.checkbox .content {
    margin-top: 4rpx;
}

.title {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    vertical-align: bottom;
}

.control-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 112rpx;
    padding: 0 40rpx;
    line-height: 96rpx;
    background-color: #EFEFEF;
    text-align: center;
    box-sizing: border-box;
}

.wait {
    height: 58rpx;
    width: 182rpx;
    line-height: 58rpx;
    color: #FFFFFF;
    font-size: 26rpx;
    text-align: center;
    background-color: #ff6600;
    border-radius: 10rpx;
}

.control {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 347rpx;
    border-radius: 74rpx 74rpx 0 0;
    box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.16);
    background-color: rgb(246, 246, 246);
    box-sizing: border-box;
    z-index: 2;
}

.control .folder-info {
    padding-bottom: 37rpx;
    margin-bottom: 37rpx;
    border-bottom: 2rpx solid #EBEBEB;
}

.cot-list {
    display: flex;
    align-items: center;
}

.cot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 50rpx;
}

.cot-icon {
    width: 94rpx;
    height: 94rpx;
    margin-bottom: 10rpx;
}

.cot-name {
    font-size: 24rpx;
    color: #141414;
    font-weight: 500;
    white-space: nowrap;
}

.cancel {
    margin-top: 58rpx;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 104rpx;
    text-align: center;
    background-color: #FFFFFF;
}

.black {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    opacity: .38;
}

button {
    margin: 0;
    padding: 0;
    background-color: transparent;
    line-height: normal;
}

.none-icon {
    width: 422rpx;
    height: 268rpx;
    margin-top: 200rpx;
    margin-bottom: 46rpx;
}

.tips {
    margin-bottom: 66rpx;
    font-size: 28rpx;
    color: #A7A6A6;
}

.go {
    height: 60rpx;
    width: 172rpx;
    line-height: 60rpx;
    text-align: center;
    color: #7A7A7A;
    background: #eeeeee;
    border-radius: 14rpx;
}

.model {
    position: fixed;
    width: 100%;
    height: 318rpx;
    top: 35%;
    margin: 0 auto;
    z-index: 2;
}

.model label {
    font-size: 34rpx;
    color: rgb(173, 173, 173);
    text-align: center;
}

.model-content {
    width: 80%;
    height: 400rpx;
    box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.16);
    border-radius: 25rpx;
    background-color: #FFFFFF;
}

.model-control {
    height: 55rpx;
    margin-top: 70rpx;
    padding-top: 42rpx;
    border-top: 2rpx solid #E8E8E8;
}

.model-ctl-item:last-child {
    color: rgb(64, 99, 175);
}

.model-title {
    font-size: 35rpx;
    margin-top: 62rpx;
    margin-bottom: 46rpx;
    font-weight: bold;
    text-align: center;
}

.model checkbox .wx-checkbox-input {
    border-radius: 25rpx;
    /* 圆角 */
    width: 26rpx;
    /* 背景的宽 */
    height: 26rpx;
    /* 背景的高 */
    background-color: #E8E8E8;
}

.model label {
    display: flex;
    align-items: center;
}

.model label checkbox {
    margin-bottom: 6rpx;
}

.black {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    opacity: .38;
}
</style>